<template>
  <div class="EquipmentStatus">
    <div>


      <div class="chat-title">设备状态</div>
      <div class="chat-subtitle">equipment status</div>

      <div class="top-item-w">
        <div class="item-bt">
          <div class="t-t">{{equipmentInfo.AllStopTime}}/分钟</div>
          <div class="su-t">设备异常时间</div>
        </div>
        <div class="item-bt">
          <div class="t-t">{{equipmentInfo.UtilizationRate}}</div>
          <div class="su-t">设备稼动率</div>
        </div>
      </div>
      <div class="table-wrap">
        <div>
          <div class="table-item-wrap">
            <div class="tab-1">状态</div>
            <div class="tab-2">工序</div>
            <div class="tab-3">故障次数</div>
            <div class="tab-4">故障时间</div>
            <div class="tab-5">利用率%</div>
          </div>
          <EScroll :list="list"></EScroll>
        </div>
        <div>
          <!-- <div class="bottom-item">
            <div class="i-m">
              <div class="it-1"></div>
              <div>正常</div>
            </div>
            <div class="i-m">
              <div class="it-2"></div>
              <div>未用</div>
            </div>
            <div class="i-m">
              <div class="it-3"></div>
              <div>异常</div>
            </div>
          </div> -->
        </div>

        <!-- <div class="bottom-item">
        <div class="i-m">
          <div class="it-1"></div>
          <div>正常</div>
        </div>
        <div class="i-m">
          <div class="it-2"></div>
          <div>未用</div>
        </div>
        <div class="i-m">
          <div class="it-3"></div>
          <div>异常</div>
        </div>
      </div> -->
      </div>
    </div>
    <div>
      <div class="bottom-item">
        <div class="i-m">
          <div class="it-1"></div>
          <div>正常</div>
        </div>
        <div class="i-m">
          <div class="it-2"></div>
          <div>未用</div>
        </div>
        <div class="i-m">
          <div class="it-3"></div>
          <div>异常</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import EScroll from './EScroll';
  export default {
    props: ["equipmentInfo"],
    data() {
      return {
        list: [],
        percentage: 20,
        customColor: '#409eff',
        timer1: "",
        animate: false,
      }
    },

    components: {
      EScroll,
    },
    mounted() {
      this.list = this.equipmentInfo.MachineStatusList
    },
    methods: {

    },
  }

</script>

<style lang="scss">
  .EquipmentStatus {
    background: #111825;
    min-height: 668px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .list-wr {
      cursor: pointer;
    }

    .el-progress__text {
      color: white;
    }

    .el-progress-bar__outer {
      background: #25303E;
    }

    .t-t {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #FF486F;
    }

    .su-t {
      margin-top: 4px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #999999;
    }

    .tag-1 {
      width: 15px;
      height: 15px;
      background: #1DD27D;
      border-radius: 50%;
    }

    .top-item-w {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
    }

    .item-bt {
      width: 175px;
      height: 46px;
      border: 1px solid #353F4C;
      text-align: center;
      padding-top: 7px;
    }

    .table-wrap {
      // position: relative;
      margin: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .table-item-wrap {
      display: flex;
      justify-content: space-around;
      margin: 20px 0px;

      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #FFFFFF;
      display: flex;
      justify-content: space-around;
      text-align: center;
    }

    .tab-1 {
      width: 15%;
      display: flex;
      justify-content: center;
    }

    .tab-2 {
      width: 15%;

    }

    .tab-3 {
      width: 20%;

    }

    .tab-4 {
      width: 20%;

    }

    .tab-5 {
      width: 30%;

    }



    .bottom-item {
      // position: absolute;
      // bottom: 10px;
      // left: 10px;
      display: flex;
      justify-content: space-around;
      color: white;
      // width: 100%;
      min-width: 410px;

      height: 50px;
      text-align: center;
      padding-top: 20px;

      .i-m {
        display: flex;
      }

      .it-1 {
        width: 30px;
        height: 14px;
        background: #1DD27D;
        border-radius: 7px;
        margin-right: 5px;
      }

      .it-2 {
        width: 30px;
        height: 14px;
        background: #EBDB2C;
        border-radius: 7px;
        margin-right: 5px;

      }

      .it-3 {
        width: 30px;
        height: 14px;
        background: #FF486F;
        border-radius: 7px;
        margin-right: 5px;

      }
    }
  }

</style>
